<template>
	<view>
		<view class="auth">
			<view class="wanl-title">{{$t('pages.user.register.欢迎注册账号')}}</view>
			<form @submit="formSubmit">
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input 
						:placeholder="$t('pages.user.register.请输入手机号')" 
						type="number"	
						confirm-type="next" 
						placeholder-class="placeholder" 
						name="mobile"
						v-model="mobile"
						@input="onKeyInput"
					></input>
				</view>
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input confirm-type="done" :placeholder="$t('pages.user.register.请填写您的密码')" password v-model="password" type="text" placeholder-class="placeholder" name="password" @input="onKeyInput" ></input>
				</view>
				
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input confirm-type="done" :placeholder="$t('pages.user.register.请确认密码')" password v-model="newpassword" type="text" placeholder-class="placeholder" name="newpassword" @input="onKeyInput" ></input>
				</view>
				
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input confirm-type="done" :placeholder="$t('pages.user.register.请填写您的支付密码')" password v-model="pay_password" type="text" placeholder-class="placeholder" name="pay_password" @input="onKeyInput" ></input>
				</view>
				
				<view class="auth-group radius-bock bg-gray wlian-grey-light" v-if="invite_code">
					<sapn>{{invite_code}}</sapn>
				</view>
				
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" formType="submit">{{$t('pages.user.register.注册')}}</button>
				</view>
				<!-- 同意服务条款 -->
				<checkbox-group :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
					<checkbox class="orange" :class="checked == 2 ? 'checked' : ''" :checked="checked == 2 ? true : false" value="2" />
					<view>
					{{$t('pages.user.auth.我已阅读')}}<text @tap="onDetails($store.state.common.appConfig.user_agreement, $t('pages.user.auth.用户协议'))">{{$t('pages.user.auth.用户协议')}}</text>{{$t('pages.user.auth.及')}}<text @tap="onDetails($store.state.common.appConfig.privacy_protection, $t('pages.user.auth.隐私保护'))">{{$t('pages.user.auth.隐私权保护声明')}}</text>
					
					</view>
				</checkbox-group>
			</form>
		</view>
		<view class="auth-foot" :style="invite_code ? { bottom: '200rpx' } : {}">
			<view class="menu text-grey">
				<text @tap="auth">{{$t('pages.user.auth.登录')}}</text>
				<text @tap="help">{{$t('pages.user.auth.帮助')}}</text>
			</view>
		</view>
	</view>
</template>
<script>
import graceChecker from '@/common/graceChecker';//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
export default {
	data() {
		return {
			submitDisabled: true,
			title: this.$t('validate.密码应为6-12个字符'),
			pageroute: '',
			mobile: '',
			password:'',
			newpassword:'',
			pay_password:'',
			invite_code:'',
			checked: 0
		};
	},
	onLoad(options) {
		this.pageroute = options.url;
		 const stage1 = decodeURIComponent(options.url); 
		  // 第二步：继续解码得到完整路径
		  const fullPath = decodeURIComponent(stage1); 
		 const paramPart = fullPath.split('?')[1] || '';
		 const params = {};
		   paramPart.split('&').forEach(item => {
			 const [key, val] = item.split('=');
			 if(key) params[key] = decodeURIComponent(val || '');
		   });
		if(params.share_id){
			uni.request({
				url: '/wanlshop/user/recommendInviteCode',
				data:{ids:params.share_id},
				method: 'POST',
				success: res => {
					this.invite_code = res.data.invite_code;
				}
			});
		}else if(params.invite_code){
			this.invite_code = params.invite_code;
		}else{
			this.invite_code = options.invite_code;
		}
		       // 获取目标参数
		if (options.mobile) {
			this.mobile = options.mobile;
			this.submitDisabled = false;
		}
	},
	methods: {
	
		CheckboxChange(e) {
			this.checked = e.detail.value;
		},
		onKeyInput: function(e) {
			this.submitDisabled = false
		},
		formSubmit: function(e) {
			if(this.checked == 2){
				//定义表单规则
				var rule = [
					// { name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' },
					{ name: "password", checkType: "string", checkRule: "6,12", errorMsg: this.$t('validate.密码应为6-12个字符') }
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					if(this.password != this.newpassword){
						return setTimeout(() => {
							this.$wanlshop.msg(this.$t('validate.两次密码不一致'));
						}, 300)
					}
					if(!this.pay_password){
						return setTimeout(() => {
							this.$wanlshop.msg(this.$t('validate.请输入支付密码'));
						}, 300)
					}
					var openid = '';
					if(uni.getStorageSync('wanlshop:openid')){
						openid = uni.getStorageSync('wanlshop:openid');
					}
					
					 uni.request({
					    url: '/wanlshop/user/register', 
						method: 'POST',
						data:{
							mobile: this.mobile,
							password: this.password,
							newpassword: this.newpassword,
							invite_code:this.invite_code,
							pay_password:this.pay_password,
							openid:openid
						},
					    success: res => {
							uni.hideLoading();
							// 中央控制总线
							this.$store.dispatch('user/login', res.data);
							this.$store.dispatch('cart/login');
							this.$store.dispatch('chat/get');
							// this.$wanlshop.to('/pages/index');
							//如果openid存在，注册成功情况openid
							// if(openid){
							// 	uni.setStorageSync('wanlshop:openid', '');
							// }
							if(this.pageroute){
								uni.reLaunch({url: decodeURIComponent(this.pageroute)});
							}else{
								uni.switchTab({
									url: '/pages/index'
								});
							}
					        // 
					    }
					});
					// uni.request({
					// 	url: '/wanlshop/validate/check_mobile_available',
					// 	data: {
					// 		mobile: this.mobile
					// 	},
					// 	// 1.1.8 升级
					// 	complete: res => {
					// 		if(res.res.code == 1){
					// 			this.$wanlshop.to(`validcode?event=register&mobile=${e.detail.value.mobile}&url=${this.pageroute}`,'slide-in-bottom',200);
					// 		}else{
					// 			uni.showModal({
					// 			    title: '手机号已被注册',
					// 			    content: '点击确定使用手机号登录',
					// 			    success: (msg)=> {
					// 			        if (msg.confirm) {
					// 			           this.$wanlshop.to(`phone?mobile=${e.detail.value.mobile}&url=${this.pageroute}`,'slide-in-bottom',200);
					// 			        } else if (msg.cancel) {
					// 			            console.log('用户点击取消');
					// 			        }
					// 			    }
					// 			});
					// 		}
					// 	}
					// });
				} else {
					this.$wanlshop.msg(graceChecker.error);
				}
			}else{
				this.checked = 1;
				setTimeout(() => {
					this.checked = 0;
					this.$wanlshop.msg(this.$t('pages.user.auth.请先同意用户协议和隐私保护声明'));
				}, 300)
			}
		},
		auth() {
			this.$wanlshop.to(`auth?url=${this.pageroute}`);
		},
		help() {
			this.$wanlshop.to(`/pages/user/help?url=${this.pageroute}`);
		}
	}
};
</script>

<style>
	@import url("auth.css");
</style>
